<template>
  <div class="accountpage">
    <div class="accountbox">
        <ul>
            <li class="flex between item-center">
                <div>
                    <h3>手机号</h3>
                    <p v-if="user.phone">已绑定的手机号：{{ user.phone }}</p>
                    <p v-else>尚未绑定手机号登录</p>
                </div>
                <div>
                    <el-button @click="handleBinding('绑定手机号')">修改</el-button>
                </div>
            </li>
            <li class="flex between item-center">
                <div>
                    <h3>邮箱</h3>
                    <p v-if="user.email">已绑定的邮箱：{{ user.email }}</p>
                    <p v-else>尚未绑定邮箱登录</p>
                </div>
                <div>
                    <el-button @click="handleBinding('绑定邮箱')">修改</el-button>
                </div>
            </li>
            <li class="flex between item-center">
                <div>
                    <h3>公众号</h3>
                    <p>尚未绑定邮箱登录</p>
                </div>
                <div>
                    <el-button>修改</el-button>
                </div>
            </li>
        </ul>
    </div>
    <el-dialog :title="title" :visible.sync="visible" width="30%">
        <el-form v-if="title == '绑定手机号'" :model="phoneForm" :rules="phoneRules" ref="phoneForm" label-width="100px">
            <el-form-item label="" prop="phone">
                <el-input v-model="phoneForm.phone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="" prop="code">
                <div class="flex bwtween item-center">
                    <el-input v-model="phoneForm.code" placeholder="请输入验证码"></el-input>
                    <el-button :disabled="!sendFlag" style="margin-left: 10px;" @click="sendPhoneCode">{{ sendTitle }}</el-button>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('phoneForm')">确定</el-button>
                <el-button @click="visible = false">取消</el-button>
            </el-form-item>
        </el-form>

        <el-form v-if="title == '绑定邮箱'" :model="emailForm" :rules="emailRules" ref="emailForm" label-width="100px">
            <el-form-item label="" prop="email">
                <el-input v-model="emailForm.email" placeholder="请输入邮箱"></el-input>
            </el-form-item>
            <el-form-item label="" prop="code">
                <div class="flex bwtween item-center">
                    <el-input v-model="emailForm.code" placeholder="请输入验证码"></el-input>
                    <el-button :disabled="!sendEamilFlag" style="margin-left: 10px;"  @click="sendEmailCode">{{ sendEmailTitle }}</el-button>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('emailForm')">确定</el-button>
                <el-button @click="visible = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
  </div>
</template>

<script>
import {getUser} from '@/utils/auth'
import Api from '@/api'
export default {
    data() {
        var checkPhone = (rules,value,cb) => {
            const regMobile = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    
            if(regMobile.test(value)){
                return cb()
            }
    
            cb(new Error('请输入合法的手机号'))
        }

        var checkEmail = (rules,value,cb) => {
            // 验证邮箱的正则表达式
            const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
            if(regEmail.test(value)) {
            return cb()
            }
            cb(new Error('请输入合法的邮箱'))
        }

        return {
            user: {},
            title: '',
            visible: false,
            sendFlag: true,
            sendTitle: '发送验证码',
            sendEamilFlag: true,
            sendEmailTitle: '发送验证码',
            phoneForm: {
                type: 1
            },
            phoneRules: {
                phone: [
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    {validator:checkPhone,trigger:'blur'}
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            },
            emailForm: {
                type: 2
            },
            emailRules: {
                email: [
                { required: true, message: '请输入邮箱', trigger: 'blur' },
                    {validator:checkEmail,trigger:'blur'}
                ],
                code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            }
        }
    },
    mounted() {
        this.user = getUser()
        console.log(this.user)
    },
    methods: {
        async sendEmailCode() {
            const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
            if(!regEmail.test(this.emailForm.email)) {
                return this.$message.error('请输入合法的邮箱')
            }
            const res = await Api.sendEmailCode({
                email: this.emailForm.email
            })
            if (res.data.success) {
                    this.$message.success('发送成功')
                } else {
                    return this.$message.error(res.data.msg)
                }

                this.sendEamilFlag = false
            let time = 10 ;
            let intervalEmail = setInterval(() => {
                if (--time <= 0) {
                    this.sendEamilFlag = true
                    this.sendEmailTitle = '重新发送'
                    clearInterval(intervalEmail)
                } else {
                    this.sendEmailTitle = time + '秒'
                }
            }, 1000)
        },
        async sendPhoneCode() {
            const regMobile = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    
            if(!regMobile.test(this.phoneForm.phone)){
                return this.$message.error('请输入合法的手机号')
            }
            const res = await Api.sendPhoneCode({
                phone: this.phoneForm.phone
            })
            if (res.data.success) {
                    this.$message.success('发送成功')
                } else {
                    return this.$message.error(res.data.msg)
                }
            this.sendFlag = false
            let time = 10 ;
            let interval = setInterval(() => {
                if (--time <= 0) {
                    this.sendFlag = true
                    this.sendTitle = '重新发送'
                    clearInterval(interval)
                } else {
                    this.sendTitle = time + '秒'
                }
            }, 1000)
        },
        submitForm(form) {
            console.log(form)
            this.$refs[form].validate((valid) => {
            if (valid) {
                Api.resetUser(this[form]).then(res => {
                    if (res.data.success) {
                        this.$message.success(res.data.msg)
                    } else {
                        this.$message.error(res.data.msg)
                    }
                })
            } else {
                return false;
            }
            });
        },
        handleBinding(title) {
            this.title = title
            this.visible = true
        }
    }
}
</script>

<style lang="scss" scoped>
.accountbox {
    width: 60%;
    li {
        padding: 10px;
        border-bottom: 1px solid #eee;
        &:last-child {
            border: none;
        }
        h3 {
            font-size: 18px;
            color: #000;
            margin-bottom: 10px;
        }
    }
}
</style>